import { useEffect, useRef } from 'react';
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css';

interface RichTextEditorProps {
    value: string;
    onChange: (content: string) => void;
}

const RichTextEditor: React.FC<RichTextEditorProps> = ({ value, onChange }) => {
    const testref = useRef(null)
    let reactQuillRef = useRef(null);
    const modules = {
        toolbar: {
            container: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ header: 1 }, { header: 2 }],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }],
                [{ indent: '-1' }, { indent: '+1' }],
                [{ direction: 'rtl' }],
                [{ size: ['small', false, 'large', 'huge'] }], //字体设置
                [
                    {
                        color: [],
                    },
                ],
                [
                    {
                        background: [],
                    },
                ],
                [{ font: [] }],
                [{ align: [] }],
                ['link', 'image'], // a链接和图片的显示
            ],
        },
    };
    useEffect(() => {
    }, [])

    const handleChange = (content: string) => {
        onChange(content);
    };

    return typeof window !== 'undefined' ? (
        <ReactQuill
            value={value}
            modules={modules}
            onChange={handleChange}
            ref={reactQuillRef}
        />
    ) : null;
};

export default RichTextEditor;
